<template>
  <div style="width: 600px; height: 400px" ref="redarBox" id="redarBox">
    雷达
  </div>
</template>

<script>
// 1.完整加载echarts
// 2.给容器设置宽高 id
// 3.通过 const echarts = Echarts.init()挂载dom节点
// 4.echarts.setOption(配置) 绘制图表
import * as Echarts from 'echarts'
// 5版本后echarts没有默认导出 不允许 import Echarts from 'echarts'
import radarData from './radarData'
export default {
  name: 'Radar',
  mounted() {
    // 实例化echarts对象
    this.echarts = Echarts.init(this.$refs.redarBox)
    // 设置配置(基础结构没有数据)
    this.echarts.setOption(radarData)
    // 请求网络数据
    this.initData()
  },
  methods: {
    initData() {
      // 模拟ajax请求获取数据
      setTimeout(() => {
        const value1 = [4200, 3000, 20000, 35000, 50000, 18000]
        const value2 = [4200, 3000, 20000, 35000, 50000, 18000]
        radarData.series[0].data[0].value = value1
        radarData.series[0].data[1].value = value2
        // ⭐重新绘制 每次数据改变都要重新绘制图表
        this.echarts.setOption(radarData)
      }, 2000)
    }
  }
}
</script>

<style></style>
